<template>
  <view class="drone-rental-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="search-container">
        <u-icon name="search" size="26" color="#999"></u-icon>
        <input 
          type="text" 
          placeholder="搜索无人机型号或品牌" 
          class="search-input"
          v-model="searchKeyword"
          @confirm="handleSearch"
        >
      </view>
      <u-icon name="shopping-cart" size="28" color="#333" @click="gotoCart"></u-icon>
    </view>
    
    <!-- 分类筛选栏 -->
    <scroll-view class="category-scroll" scroll-x>
      <view class="category-item" :class="{active: activeCategory === 'all'}" @click="setCategory('all')">
        <text>全部机型</text>
      </view>
      <view class="category-item" :class="{active: activeCategory === 'consumer'}" @click="setCategory('consumer')">
        <text>消费级</text>
      </view>
      <view class="category-item" :class="{active: activeCategory === 'professional'}" @click="setCategory('professional')">
        <text>专业级</text>
      </view>
      <view class="category-item" :class="{active: activeCategory === 'industrial'}" @click="setCategory('industrial')">
        <text>工业级</text>
      </view>
      <view class="category-item" :class="{active: activeCategory === 'agricultural'}" @click="setCategory('agricultural')">
        <text>农业植保</text>
      </view>
      <view class="category-item" :class="{active: activeCategory === 'payload'}" @click="setCategory('payload')">
        <text>载荷设备</text>
      </view>
    </scroll-view>
    
    <!-- 筛选工具栏 -->
    <view class="filter-toolbar">
      <view class="filter-item" @click="toggleFilter('price')">
        <text :class="{active: activeFilter === 'price'}">价格</text>
        <u-icon name="arrow-down" size="20" :color="activeFilter === 'price' ? '#00b42a' : '#999'"></u-icon>
      </view>
      <view class="filter-item" @click="toggleFilter('brand')">
        <text :class="{active: activeFilter === 'brand'}">品牌</text>
        <u-icon name="arrow-down" size="20" :color="activeFilter === 'brand' ? '#00b42a' : '#999'"></u-icon>
      </view>
      <view class="filter-item" @click="toggleFilter('rating')">
        <text :class="{active: activeFilter === 'rating'}">评分</text>
        <u-icon name="arrow-down" size="20" :color="activeFilter === 'rating' ? '#00b42a' : '#999'"></u-icon>
      </view>
      <view class="filter-item" @click="toggleFilter('newest')">
        <text :class="{active: activeFilter === 'newest'}">最新上架</text>
        <u-icon name="arrow-down" size="20" :color="activeFilter === 'newest' ? '#00b42a' : '#999'"></u-icon>
      </view>
      <view class="filter-item filter-more" @click="showMoreFilter">
        <text>更多筛选</text>
        <u-icon name="filter" size="20" color="#999"></u-icon>
      </view>
    </view>
    
    <!-- 价格筛选弹窗 -->
    <view class="price-filter-popup" v-if="showPriceFilter">
      <view class="popup-overlay" @click="hideAllFilters"></view>
      <view class="popup-content price-content">
        <view class="popup-header">
          <text class="popup-title">价格筛选</text>
          <u-icon name="close" size="26" color="#666" @click="hideAllFilters"></u-icon>
        </view>
        
        <view class="price-options">
          <view 
            class="price-option" 
            v-for="(option, index) in priceOptions" 
            :key="index"
            @click="selectPriceOption(option)"
            :class="{selected: selectedPrice === option.value}"
          >
            <text>{{ option.label }}</text>
          </view>
        </view>
        
        <view class="price-range">
          <text class="range-text">自定义价格范围</text>
          <view class="range-inputs">
            <input 
              type="number" 
              placeholder="最低" 
              class="range-input"
              v-model="priceMin"
            >
            <text class="range-separator">-</text>
            <input 
              type="number" 
              placeholder="最高" 
              class="range-input"
              v-model="priceMax"
            >
            <text class="range-unit">元/天</text>
          </view>
        </view>
        
        <view class="popup-footer">
          <button class="reset-btn" @click="resetPriceFilter">重置</button>
          <button class="confirm-btn" @click="confirmPriceFilter">确定</button>
        </view>
      </view>
    </view>
    
    <!-- 品牌筛选弹窗 -->
    <view class="brand-filter-popup" v-if="showBrandFilter">
      <view class="popup-overlay" @click="hideAllFilters"></view>
      <view class="popup-content brand-content">
        <view class="popup-header">
          <text class="popup-title">品牌筛选</text>
          <u-icon name="close" size="26" color="#666" @click="hideAllFilters"></u-icon>
        </view>
        
        <view class="brand-options">
          <view 
            class="brand-option" 
            v-for="(brand, index) in brandOptions" 
            :key="index"
            @click="toggleBrand(brand.value)"
          >
            <u-checkbox 
              :value="brand.value" 
              v-model="selectedBrands"
              shape="circle"
              active-color="#00b42a"
            ></u-checkbox>
            <text class="brand-name">{{ brand.label }}</text>
          </view>
        </view>
        
        <view class="popup-footer">
          <button class="reset-btn" @click="resetBrandFilter">重置</button>
          <button class="confirm-btn" @click="confirmBrandFilter">确定</button>
        </view>
      </view>
    </view>
    
    <!-- 更多筛选弹窗 -->
    <view class="more-filter-popup" v-if="showMoreFilter">
      <view class="popup-overlay" @click="hideAllFilters"></view>
      <view class="popup-content more-content">
        <view class="popup-header">
          <text class="popup-title">更多筛选</text>
          <u-icon name="close" size="26" color="#666" @click="hideAllFilters"></u-icon>
        </view>
        
        <!-- 续航时间 -->
        <view class="filter-section">
          <text class="section-title">续航时间</text>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(option, index) in flightTimeOptions" 
              :key="index"
              @click="selectFlightTime(option)"
              :class="{selected: selectedFlightTime === option.value}"
            >
              <text>{{ option.label }}</text>
            </view>
          </view>
        </view>
        
        <!-- 最大载重 -->
        <view class="filter-section">
          <text class="section-title">最大载重</text>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(option, index) in payloadOptions" 
              :key="index"
              @click="selectPayload(option)"
              :class="{selected: selectedPayload === option.value}"
            >
              <text>{{ option.label }}</text>
            </view>
          </view>
        </view>
        
        <!-- 新旧程度 -->
        <view class="filter-section">
          <text class="section-title">新旧程度</text>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(option, index) in conditionOptions" 
              :key="index"
              @click="selectCondition(option)"
              :class="{selected: selectedCondition === option.value}"
            >
              <text>{{ option.label }}</text>
            </view>
          </view>
        </view>
        
        <!-- 支持功能 -->
        <view class="filter-section">
          <text class="section-title">支持功能</text>
          <view class="filter-options">
            <view 
              class="filter-option checkbox-option" 
              v-for="(feature, index) in featureOptions" 
              :key="index"
              @click="toggleFeature(feature.value)"
            >
              <u-checkbox 
                :value="feature.value" 
                v-model="selectedFeatures"
                shape="circle"
                active-color="#00b42a"
              ></u-checkbox>
              <text class="option-text">{{ feature.label }}</text>
            </view>
          </view>
        </view>
        
        <view class="popup-footer">
          <button class="reset-btn" @click="resetMoreFilter">重置</button>
          <button class="confirm-btn" @click="confirmMoreFilter">确定</button>
        </view>
      </view>
    </view>
    
    <!-- 商品列表 -->
    <scroll-view 
      class="product-list" 
      scroll-y 
      @scrolltolower="loadMoreProducts"
      refresher-enabled 
      @refresherrefresh="refreshProducts"
      @scroll="onScroll"
    >
      <view class="product-grid">
        <!-- 商品项 -->
        <view 
          class="product-card" 
          v-for="(product, index) in filteredProducts" 
          :key="product.id"
          @click="navigateToDetail(product.id)"
        >
          <view class="product-image-container">
            <image 
              class="product-image" 
              :src="product.imageUrl" 
              mode="aspectFill"
              alt="无人机图片"
            ></image>
            <view class="product-tag" v-if="product.tag">
              <text>{{ product.tag }}</text>
            </view>
            <view class="rent-count">
              <u-icon name="account" size="18" color="#fff"></u-icon>
              <text class="count-text">{{ product.rentCount }}人已租</text>
            </view>
          </view>
          
          <view class="product-info">
            <text class="product-brand">{{ product.brand }}</text>
            <text class="product-name">{{ product.name }}</text>
            
            <view class="product-features">
              <text class="feature-item" v-for="(feature, i) in product.features.slice(0, 2)" :key="i">
                {{ feature }}
              </text>
            </view>
            
            <view class="product-price">
              <text class="price-number">
				  ¥{{ product.price }}
				  <text class="price-unit">/天</text>
			  </text>
              
              <view class="product-rating" v-if="product.rating">
                <u-icon name="star" size="18" color="#ffcc00" fill="#ffcc00"></u-icon>
                <text class="rating-text">{{ product.rating }}</text>
              </view>
            </view>
            
            <button class="rent-btn" @click.stop="addToCart(product)">
              立即租用
            </button>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="loading-more" v-if="isLoading && !isRefreshing">
        <u-loading-icon size="24" color="#666"></u-loading-icon>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 没有更多 -->
      <view class="no-more" v-if="!isLoading && filteredProducts.length >= totalCount && filteredProducts.length > 0">
        <text>已经到底啦</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredProducts.length === 0 && !isLoading">
        <image src="/static/images/empty-drone-rental.png" class="empty-img" mode="widthFix" alt="没有找到无人机"></image>
        <text class="empty-text">没有找到符合条件的无人机</text>
        <button class="reset-btn" @click="resetAllFilters">重置筛选条件</button>
      </view>
    </scroll-view>
    
    <!-- 回到顶部按钮 -->
    <view class="back-to-top" v-if="showBackToTop" @click="scrollToTop">
      <u-icon name="arrow-up" size="24" color="#fff"></u-icon>
    </view>
    
    <!-- 加入购物车提示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 搜索关键词
      searchKeyword: '',
      
      // 分类筛选
      activeCategory: 'all',
      
      // 排序筛选
      activeFilter: '',
      showPriceFilter: false,
      showBrandFilter: false,
      showMoreFilter: false,
      
      // 价格筛选选项
      priceOptions: [
        { label: '全部价格', value: '' },
        { label: '100元以下/天', value: '0-100' },
        { label: '100-300元/天', value: '100-300' },
        { label: '300-500元/天', value: '300-500' },
        { label: '500-1000元/天', value: '500-1000' },
        { label: '1000元以上/天', value: '1000+' }
      ],
      selectedPrice: '',
      priceMin: '',
      priceMax: '',
      
      // 品牌筛选选项
      brandOptions: [
        { label: '大疆', value: 'dji' },
        { label: '极飞', value: 'jifei' },
        { label: '亿航', value: 'yihang' },
        { label: '道通', value: 'daitong' },
        { label: '哈博森', value: 'habo' },
        { label: '普宙', value: 'puzhou' },
        { label: '昊翔', value: 'haoxiang' }
      ],
      selectedBrands: [],
      
      // 更多筛选选项
      flightTimeOptions: [
        { label: '不限', value: '' },
        { label: '15分钟以下', value: '<15' },
        { label: '15-30分钟', value: '15-30' },
        { label: '30-60分钟', value: '30-60' },
        { label: '60分钟以上', value: '>60' }
      ],
      payloadOptions: [
        { label: '不限', value: '' },
        { label: '0.5kg以下', value: '<0.5' },
        { label: '0.5-2kg', value: '0.5-2' },
        { label: '2-5kg', value: '2-5' },
        { label: '5kg以上', value: '>5' }
      ],
      conditionOptions: [
        { label: '不限', value: '' },
        { label: '全新', value: 'new' },
        { label: '9成新以上', value: '90' },
        { label: '8成新以上', value: '80' },
        { label: '7成新以上', value: '70' }
      ],
      featureOptions: [
        { label: '带云台', value: 'gimbal' },
        { label: '4K高清', value: '4k' },
        { label: '避障功能', value: 'obstacle' },
        { label: '智能跟随', value: 'follow' },
        { label: '折叠设计', value: 'foldable' },
        { label: '长续航', value: 'longflight' },
        { label: '防水', value: 'waterproof' }
      ],
      
      // 选中的更多筛选条件
      selectedFlightTime: '',
      selectedPayload: '',
      selectedCondition: '',
      selectedFeatures: [],
      
      // 商品数据
      products: [],
      totalCount: 0,
      page: 1,
      pageSize: 12,
      isLoading: false,
      isRefreshing: false,
      
      // 回到顶部按钮
      showBackToTop: false
    };
  },
  
  computed: {
    // 根据筛选条件过滤商品
    filteredProducts() {
      return this.products.filter(product => {
        // 分类筛选
        if (this.activeCategory !== 'all' && product.category !== this.activeCategory) {
          return false;
        }
        
        // 搜索关键词筛选
        if (this.searchKeyword && !(
          product.name.includes(this.searchKeyword) || 
          product.brand.includes(this.searchKeyword)
        )) {
          return false;
        }
        
        // 价格筛选
        if (this.selectedPrice) {
          const [min, max] = this.selectedPrice.split('-').map(Number);
          if (max) {
            if (product.price < min || product.price > max) return false;
          } else {
            if (product.price < min) return false;
          }
        } else if (this.priceMin || this.priceMax) {
          if (this.priceMin && product.price < Number(this.priceMin)) return false;
          if (this.priceMax && product.price > Number(this.priceMax)) return false;
        }
        
        // 品牌筛选
        if (this.selectedBrands.length > 0 && !this.selectedBrands.includes(product.brandKey)) {
          return false;
        }
        
        // 续航时间筛选
        if (this.selectedFlightTime) {
          const flightTime = product.flightTime;
          if (this.selectedFlightTime === '<15' && flightTime >= 15) return false;
          if (this.selectedFlightTime === '15-30' && (flightTime < 15 || flightTime > 30)) return false;
          if (this.selectedFlightTime === '30-60' && (flightTime < 30 || flightTime > 60)) return false;
          if (this.selectedFlightTime === '>60' && flightTime <= 60) return false;
        }
        
        // 载重筛选
        if (this.selectedPayload) {
          const payload = product.payload;
          if (this.selectedPayload === '<0.5' && payload >= 0.5) return false;
          if (this.selectedPayload === '0.5-2' && (payload < 0.5 || payload > 2)) return false;
          if (this.selectedPayload === '2-5' && (payload < 2 || payload > 5)) return false;
          if (this.selectedPayload === '>5' && payload <= 5) return false;
        }
        
        // 新旧程度筛选
        if (this.selectedCondition) {
          if (this.selectedCondition === 'new' && !product.isNew) return false;
          if (this.selectedCondition === '90' && product.condition < 90) return false;
          if (this.selectedCondition === '80' && product.condition < 80) return false;
          if (this.selectedCondition === '70' && product.condition < 70) return false;
        }
        
        // 功能筛选
        if (this.selectedFeatures.length > 0) {
          for (const feature of this.selectedFeatures) {
            if (!product.featuresKey.includes(feature)) {
              return false;
            }
          }
        }
        
        return true;
      });
    }
  },
  
  onLoad() {
    // 初始加载商品数据
    this.loadProducts();
  },
  
  methods: {
    // 加载商品数据
    loadProducts(refresh = false) {
      if (this.isLoading) return;
      
      this.isLoading = true;
      if (refresh) {
        this.page = 1;
        this.isRefreshing = true;
      }
      
      // 模拟API请求
      setTimeout(() => {
        const mockProducts = [];
        const categories = ['consumer', 'professional', 'industrial', 'agricultural', 'payload'];
        const brands = [
          { name: '大疆', key: 'dji' },
          { name: '极飞', key: 'jifei' },
          { name: '亿航', key: 'yihang' },
          { name: '道通', key: 'daitong' },
          { name: '哈博森', key: 'habo' }
        ];
        const models = {
          consumer: ['Mavic 3', 'Air 2S', 'Mini 3 Pro', 'Spark', 'Phantom 4'],
          professional: ['Inspire 2', 'Matrice 200', 'Mavic 3 Cine', 'Phantom 4 RTK'],
          industrial: ['Matrice 300 RTK', 'Mavic 2 Enterprise', 'Matrice 600 Pro'],
          agricultural: ['P30 植保机', 'T40 农业无人机', 'MG-1P', 'T20 植保机'],
          payload: ['禅思 X7 云台相机', 'L1 激光雷达', 'H20T 热成像相机']
        };
        const features = [
          '带云台', '4K高清', '避障功能', '智能跟随', 
          '折叠设计', '长续航', '防水', 'GPS定位'
        ];
        const featureKeys = ['gimbal', '4k', 'obstacle', 'follow', 'foldable', 'longflight', 'waterproof', 'gps'];
        const tags = ['热门', '新品', '特惠', '免押金', ''];
        
        for (let i = 0; i < this.pageSize; i++) {
          const id = (this.page - 1) * this.pageSize + i + 1;
          const categoryIndex = Math.floor(Math.random() * categories.length);
          const category = categories[categoryIndex];
          const brandIndex = Math.floor(Math.random() * brands.length);
          const brand = brands[brandIndex];
          const modelIndex = Math.floor(Math.random() * models[category].length);
          
          // 随机生成功能标签
          const productFeatures = [];
          const productFeatureKeys = [];
          const featureCount = Math.floor(Math.random() * 4) + 2;
          for (let j = 0; j < featureCount; j++) {
            const randomIndex = Math.floor(Math.random() * features.length);
            if (!productFeatures.includes(features[randomIndex])) {
              productFeatures.push(features[randomIndex]);
              productFeatureKeys.push(featureKeys[randomIndex]);
            }
          }
          
          // 随机价格 (根据类别)
          let price;
          if (category === 'consumer') {
            price = Math.floor(Math.random() * 400) + 100; // 100-500
          } else if (category === 'professional') {
            price = Math.floor(Math.random() * 1500) + 500; // 500-2000
          } else if (category === 'industrial') {
            price = Math.floor(Math.random() * 3000) + 2000; // 2000-5000
          } else if (category === 'agricultural') {
            price = Math.floor(Math.random() * 2000) + 1000; // 1000-3000
          } else {
            price = Math.floor(Math.random() * 800) + 200; // 200-1000
          }
          
          mockProducts.push({
            id: id,
            category: category,
            brand: brand.name,
            brandKey: brand.key,
            name: `${models[category][modelIndex]}`,
            imageUrl: `https://picsum.photos/id/${50 + id}/300/300`,
            price: price,
            originalPrice: price + Math.floor(Math.random() * 200) + 100,
            rentCount: Math.floor(Math.random() * 200) + 10,
            rating: (4 + Math.random() * 1).toFixed(1),
            flightTime: Math.floor(Math.random() * 60) + 10, // 10-70分钟
            payload: parseFloat((Math.random() * 9 + 0.1).toFixed(1)), // 0.1-9.0kg
            condition: Math.floor(Math.random() * 15) + 85, // 85-99%新
            isNew: Math.random() > 0.7,
            features: productFeatures,
            featuresKey: productFeatureKeys,
            tag: tags[Math.floor(Math.random() * tags.length)]
          });
        }
        
        // 更新数据
        if (refresh) {
          this.products = mockProducts;
          this.isRefreshing = false;
        } else {
          this.products = [...this.products, ...mockProducts];
        }
        
        this.totalCount = 60; // 模拟总条数
        this.page++;
        this.isLoading = false;
      }, 1000);
    },
    
    // 下拉刷新
    refreshProducts() {
      this.loadProducts(true);
    },
    
    // 加载更多
    loadMoreProducts() {
      if (this.products.length >= this.totalCount || this.isLoading) return;
      this.loadProducts();
    },
    
    // 设置分类
    setCategory(category) {
      this.activeCategory = category;
    },
    
    // 切换筛选器
    toggleFilter(type) {
      // 隐藏所有筛选弹窗
      this.showPriceFilter = false;
      this.showBrandFilter = false;
      this.showMoreFilter = false;
      
      // 如果点击的是当前激活的筛选器，则取消激活
      if (this.activeFilter === type) {
        this.activeFilter = '';
        return;
      }
      
      // 激活筛选器并显示对应弹窗
      this.activeFilter = type;
      if (type === 'price') {
        this.showPriceFilter = true;
      } else if (type === 'brand') {
        this.showBrandFilter = true;
      } else if (type === 'more') {
        this.showMoreFilter = true;
      }
      
      // 对于评分和最新上架，直接排序
      if (type === 'rating') {
        this.products.sort((a, b) => b.rating - a.rating);
      } else if (type === 'newest') {
        this.products.sort((a, b) => b.id - a.id);
      }
    },
    
    // 显示更多筛选
    showMoreFilter() {
      this.toggleFilter('more');
    },
    
    // 隐藏所有筛选弹窗
    hideAllFilters() {
      this.showPriceFilter = false;
      this.showBrandFilter = false;
      this.showMoreFilter = false;
      this.activeFilter = '';
    },
    
    // 选择价格选项
    selectPriceOption(option) {
      this.selectedPrice = option.value;
      this.priceMin = '';
      this.priceMax = '';
    },
    
    // 确认价格筛选
    confirmPriceFilter() {
      this.hideAllFilters();
      // 如果有自定义价格，则优先使用自定义价格
      if (this.priceMin || this.priceMax) {
        this.selectedPrice = '';
      }
    },
    
    // 重置价格筛选
    resetPriceFilter() {
      this.selectedPrice = '';
      this.priceMin = '';
      this.priceMax = '';
    },
    
    // 切换品牌选择
    toggleBrand(brandKey) {
      const index = this.selectedBrands.indexOf(brandKey);
      if (index === -1) {
        this.selectedBrands.push(brandKey);
      } else {
        this.selectedBrands.splice(index, 1);
      }
    },
    
    // 确认品牌筛选
    confirmBrandFilter() {
      this.hideAllFilters();
    },
    
    // 重置品牌筛选
    resetBrandFilter() {
      this.selectedBrands = [];
    },
    
    // 选择续航时间
    selectFlightTime(option) {
      this.selectedFlightTime = option.value;
    },
    
    // 选择载重
    selectPayload(option) {
      this.selectedPayload = option.value;
    },
    
    // 选择新旧程度
    selectCondition(option) {
      this.selectedCondition = option.value;
    },
    
    // 切换功能选择
    toggleFeature(featureKey) {
      const index = this.selectedFeatures.indexOf(featureKey);
      if (index === -1) {
        this.selectedFeatures.push(featureKey);
      } else {
        this.selectedFeatures.splice(index, 1);
      }
    },
    
    // 确认更多筛选
    confirmMoreFilter() {
      this.hideAllFilters();
    },
    
    // 重置更多筛选
    resetMoreFilter() {
      this.selectedFlightTime = '';
      this.selectedPayload = '';
      this.selectedCondition = '';
      this.selectedFeatures = [];
    },
    
    // 重置所有筛选条件
    resetAllFilters() {
      this.searchKeyword = '';
      this.activeCategory = 'all';
      this.activeFilter = '';
      this.selectedPrice = '';
      this.priceMin = '';
      this.priceMax = '';
      this.selectedBrands = [];
      this.selectedFlightTime = '';
      this.selectedPayload = '';
      this.selectedCondition = '';
      this.selectedFeatures = [];
      this.hideAllFilters();
      
      // 重新加载数据
      this.loadProducts(true);
    },
    
    // 处理搜索
    handleSearch() {
      this.loadProducts(true);
    },
    
    // 跳转到商品详情
    navigateToDetail(productId) {
      uni.navigateTo({
        url: `/pages/rental/detail?id=${productId}`
      });
    },
    
    // 加入购物车
    addToCart(product) {
      this.$refs.uToast.show({
        title: `${product.name} 已加入租用清单`,
        type: 'success',
        duration: 1500
      });
      
      // 实际项目中这里应该调用加入购物车的API
    },
    
    // 前往购物车
    gotoCart() {
      uni.navigateTo({
        url: '/pages/rental/cart'
      });
    },
    
    // 滚动监听
    onScroll(e) {
      this.showBackToTop = e.detail.scrollTop > 800;
    },
    
    // 回到顶部
    scrollToTop() {
      const scrollView = uni.createSelectorQuery().select('.product-list');
      scrollView.scrollOffset(function(res) {
        scrollView.scrollTo({
          scrollTop: 0,
          duration: 300
        });
      }).exec();
    }
  }
};
</script>

<style lang="scss" scoped>
.drone-rental-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

// 导航栏
.navbar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  
  .search-container {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f5f7fa;
    border-radius: 40rpx;
    padding: 12rpx 20rpx;
    margin-right: 20rpx;
    
    .search-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      padding-left: 10rpx;
      height: 40rpx;
      line-height: 40rpx;
    }
  }
}

// 分类滚动栏
.category-scroll {
  background-color: #fff;
  padding: 15rpx 0;
  white-space: nowrap;
  border-bottom: 1px solid #eee;
  
  .category-item {
    display: inline-block;
    padding: 10rpx 24rpx;
    margin: 0 10rpx;
    font-size: 28rpx;
    color: #666;
    border-radius: 40rpx;
    transition: all 0.2s;
    
    &.active {
      background-color: #4facfe;
      color: #fff;
    }
  }
}

// 筛选工具栏
.filter-toolbar {
  display: flex;
  background-color: #fff;
  height: 80rpx;
  border-bottom: 1px solid #eee;
  
  .filter-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #666;
    
    text.active {
      color: #4facfe;
    }
    
    u-icon {
      margin-left: 5rpx;
    }
  }
  
  .filter-more {
    flex: 1.2;
  }
}

// 筛选弹窗通用样式
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 998;
}

.popup-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  z-index: 999;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #eee;
  
  .popup-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
}

.popup-footer {
  display: flex;
  padding: 20rpx 30rpx;
  border-top: 1px solid #eee;
  
  .reset-btn, .confirm-btn {
    flex: 1;
    height: 80rpx;
    border-radius: 10rpx;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .reset-btn {
    background-color: #f5f5f5;
    color: #666;
    border: none;
    margin-right: 20rpx;
  }
  
  .confirm-btn {
    background-color: #4facfe;
    color: #fff;
    border: none;
  }
}

// 价格筛选弹窗
.price-content {
  max-height: 60vh;
  overflow-y: auto;
}

.price-options {
  padding: 20rpx 30rpx;
  
  .price-option {
    padding: 18rpx 10rpx;
    font-size: 28rpx;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    
    &.selected {
      color: #4facfe;
      font-weight: 500;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        right: 10rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 20rpx;
        height: 36rpx;
        border-right: 4rpx solid #4facfe;
        border-bottom: 4rpx solid #4facfe;
        transform: rotate(45deg) translateY(-60%);
      }
    }
  }
}

.price-range {
  padding: 25rpx 30rpx;
  border-top: 1px solid #eee;
  
  .range-text {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .range-inputs {
    display: flex;
    align-items: center;
    
    .range-input {
      flex: 1;
      height: 70rpx;
      border: 1px solid #eee;
      border-radius: 8rpx;
      padding: 0 15rpx;
      font-size: 26rpx;
    }
    
    .range-separator {
      padding: 0 15rpx;
      font-size: 28rpx;
      color: #999;
    }
    
    .range-unit {
      margin-left: 15rpx;
      font-size: 26rpx;
      color: #666;
    }
  }
}

// 品牌筛选弹窗
.brand-content {
  max-height: 70vh;
  overflow-y: auto;
}

.brand-options {
  padding: 20rpx 30rpx;
  
  .brand-option {
    display: flex;
    align-items: center;
    padding: 18rpx 10rpx;
    border-bottom: 1px solid #f5f5f5;
    
    .brand-name {
      margin-left: 15rpx;
      font-size: 28rpx;
      color: #333;
    }
  }
}

// 更多筛选弹窗
.more-content {
  max-height: 80vh;
  overflow-y: auto;
}

.filter-section {
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
  
  .section-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
    font-weight: 500;
  }
  
  .filter-options {
    display: flex;
    flex-wrap: wrap;
    
    .filter-option {
      width: 25%;
      padding: 15rpx 0;
      font-size: 26rpx;
      color: #666;
      text-align: center;
      box-sizing: border-box;
      
      &.selected {
        color: #4facfe;
        font-weight: 500;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 5rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 6rpx;
          background-color: #4facfe;
          border-radius: 3rpx;
        }
      }
      
      &.checkbox-option {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 15rpx 20rpx;
        
        .option-text {
          margin-left: 15rpx;
        }
      }
    }
  }
}

// 商品列表
.product-list {
  min-height: calc(100vh - 300rpx);
  padding-bottom: 40rpx;
  
  .product-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 15rpx;
  }
  
  .product-card {
    width: 50%;
    padding: 15rpx;
    box-sizing: border-box;
    
    .product-image-container {
      position: relative;
      border-radius: 10rpx;
      overflow: hidden;
      background-color: #f5f5f5;
    }
    
    .product-image {
      width: 100%;
      height: 280rpx;
      display: block;
    }
    
    .product-tag {
      position: absolute;
      top: 15rpx;
      left: 15rpx;
      background-color: #f53f3f;
      color: #fff;
      font-size: 22rpx;
      padding: 5rpx 12rpx;
      border-radius: 4rpx;
    }
    
    .rent-count {
      position: absolute;
      bottom: 10rpx;
      right: 10rpx;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 20rpx;
      padding: 3rpx 10rpx;
      border-radius: 15rpx;
      display: flex;
      align-items: center;
      
      .count-text {
        margin-left: 5rpx;
      }
    }
    
    .product-info {
      padding: 15rpx 5rpx;
      background-color: #fff;
      border-bottom-left-radius: 10rpx;
      border-bottom-right-radius: 10rpx;
      
      .product-brand {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 5rpx;
        display: block;
      }
      
      .product-name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .product-features {
        display: flex;
        flex-wrap: wrap;
        gap: 8rpx;
        margin-bottom: 15rpx;
        
        .feature-item {
          font-size: 22rpx;
          color: #86909c;
          background-color: #f5f5f5;
          padding: 2rpx 10rpx;
          border-radius: 4rpx;
        }
      }
      
      .product-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15rpx;
        
        .price-number {
          font-size: 30rpx;
          font-weight: 600;
          color: #f53f3f;
        }
        
        .price-unit {
          font-size: 24rpx;
          color: #86909c;
          margin-left: 5rpx;
        }
        
        .product-rating {
          display: flex;
          align-items: center;
          
          .rating-text {
            font-size: 24rpx;
            color: #86909c;
            margin-left: 5rpx;
          }
        }
      }
      
      .rent-btn {
        width: 100%;
        height: 70rpx;
        background-color: #4facfe;
        color: #fff;
        border: none;
        border-radius: 8rpx;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  
  // 加载状态
  .loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;
    
    .loading-text {
      font-size: 26rpx;
      color: #86909c;
      margin-left: 10rpx;
    }
  }
  
  // 没有更多
  .no-more {
    text-align: center;
    padding: 40rpx 0;
    font-size: 26rpx;
    color: #86909c;
  }
  
  // 空状态
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 150rpx 0 100rpx;
    
    .empty-img {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 30rpx;
    }
    
    .empty-text {
      font-size: 28rpx;
      color: #86909c;
      margin-bottom: 40rpx;
    }
    
    .reset-btn {
      background-color: #fff;
      color: #4facfe;
      border: 1px solid #4facfe;
      width: 240rpx;
      height: 70rpx;
      border-radius: 35rpx;
      font-size: 28rpx;
    }
  }
}

// 回到顶部按钮
.back-to-top {
  position: fixed;
  bottom: 100rpx;
  right: 40rpx;
  width: 70rpx;
  height: 70rpx;
  background-color: #4facfe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  z-index: 99;
}
</style>
